/* eslint-disable react/jsx-pascal-case */
import React from "react";

const Express = () => {
    let navigate = React.$router.useNavigate();
    // 获取路由传参的方法
    let [searchParams] = React.$router.useSearchParams();
    // 获取路由传参的ID值
    const [id, setId] = React.useState(searchParams.get('leaseid'))
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    const [info, setInfo] = React.useState({
        product: {},
        business: {}
    })

    const [expresslist, setExpresslist] = React.useState([])

    React.useEffect(() => {
        console.log(id)
        getExpressData()
    }, [id])

    const getExpressData = async () => {
        let data = {
            id: id,
            busid: LoginUser.id
        }

        let result = await React.$api.leaseexpress(data)
        if (result && result.code == 1) {
            setInfo(result.data.info)
            setExpresslist(result.data.express)
        }
    }

    const ToContact = () => {
        window.location.href = `tel: ${info.tel}`
    }

    return (
        <>
            <React.$Vant.NavBar
                fixed
                safeAreaInsetTop
                zIndex="99999"
                title="物流详情"
                onClickLeft={() => navigate('/business/lease/index')}
            />
            <div className="zy_module_content" style={{paddingTop: '50px'}}>
                <div className="swiper-container vip_user_order">

                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$router.NavLink to={`/business/product/info?pid=${info.proid}`}>
                                            <i><img src={info.product.thumbs_text} /></i>
                                            <dl>
                                                <dt>{info.product.name}</dt>
                                                <dd>
                                                    <em>押金</em>
                                                    <em>{info.rent}</em>
                                                </dd>
                                                <dd>
                                                    <em>总价</em>
                                                    <em>{info.price}</em>
                                                </dd>
                                                <dd>
                                                    <em>结束时间</em>
                                                    <em>{info.endtime_text}</em>
                                                </dd>
                                                <dd>
                                                    <em>订单状态</em>
                                                    <em>{info.status_text}</em>
                                                </dd>
                                            </dl>
                                        </React.$router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="lianxi_ge">
                <div onClick={ToContact}>联系客服</div>
            </div>
            <React.$Vant.Steps direction="vertical" active={0}>
                {
                    expresslist.map((item, index) => {
                        return (
                            <React.$Vant.Steps.Item key={index}>
                                <h3>{item.status}</h3>
                                <p>{item.time}</p>
                            </React.$Vant.Steps.Item>
                        )
                    })

                }
            </React.$Vant.Steps>
        </>
    )
}
export default Express;